<script setup lang="ts">
import { computed, onMounted, provide, reactive, ref, watch } from 'vue';
import type { TabPageEntity } from './tabcontainSrc';
import { PARENT_TABS, tabcontainProps } from './tabcontainSrc';

const props = defineProps(tabcontainProps);

defineOptions({
  name: 'CTabcontain'
});

const tabRef = ref(null);
const containerTabs = ref<Array<TabPageEntity>>([]);
const oldIndex = ref(-1);
const isFinishMounted = ref(false);

provide(PARENT_TABS, containerTabs);

const changeTab = (index) => {
  if (oldIndex.value === index) {
    return;
  }
  const tab = containerTabs.value[index];
  if (tab) {
    containerTabs.value.forEach((tab) => {
      tab.active = false;
    });
    tab.active = true;
  }
  oldIndex.value = index;
};
</script>

<template>
  <div role="tabpanel" class="tab">
    <ul class="tab-nav" :class="{ 'tab-nav-right': props.direction === 'right' }" data-tab-color="teal" role="tablist">
      <li v-for="(tab, index) in containerTabs" :key="tab.title" class="tab-pane" :class="{ active: tab.active }">
        <a href="javascript:void(0)" @click="changeTab(index)">
          <i v-if="tab.icon && tab.icon.length > 0" :class="`m-r-5 ${tab.icon ? tab.icon : ''}`"></i>
          {{ tab.title }}
        </a>
      </li>
    </ul>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="less"></style>
